<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>这是更新的，特别新啊</title>
    <link rel="stylesheet" type="" href="../jquery-ui/jquery-ui.css">
    <script src="../jquery-ui/external/jquery/jquery.js"></script>
    <script src="../jquery-ui/jquery-ui.js"></script>
    <style>
        bodu,
        html {
            margin: 0px;
            height: 100%;
            background: grey;
        }
        
        #main {
            border-radius: 20px;
            width: 600px;
            /*height: 350px;*/
            margin: 300px auto;
            background-color: whitesmoke;
        }
        
        #time {
            padding: 20px;
        }
        
        #neirong {
            /*height: 100px;*/
            min-height: 200px;
           
        }
        
        #ipt {
            font-size: 1rem;
            width: 80%;
            margin: 5px;
            height: 35px;
            float: left;
        }
        
        #sbt {
            margin: 8px;
        }
        ul{
            margin: 0px;
            padding: 0px;
        }
        li{
            list-style: none;
            width: 100%;
            background-color: salmon;
            border-bottom: 1px solid blueviolet;
        }
        #jiao{
         
            display: none;
            
        }
        #yincang button {
              width: 100px;
          
            color: hotpink;
            font-size: 1rem;
            
        }
        #yincang{
            text-align: center;
        }
      
    </style>
</head>

<body>

    <h2>ff </h2>

<h1>哈哈哈哈</h1>
<h1>吼吼吼</h1>
<h3>dhiwbhidbhw </h3>
<h5>you加入了</h5>
<h1>wad</h1>
<p>hehe </p>
    <div id="main">
        <div>
            <h1 id="time"></h1>
        </div>

        <section id="section">
            <!--button内容-->
            <div id="format">

            </div>
            <hr>

            <!--内容-->
            <div id="neirong">
                <ul id="sortable">

                </ul>
            </div>
            <hr>
        </section>

        <footer>
            <div id="jiao" style="width:100%;"><input id="ipt" name="jian">
                <button type="checkbox" id="sbt">提交</button>
            </div>
            <div id="yincang" onclick="dianji()"><button>新增</button></div>
        </footer>
    </div>
</body>

<script type="text/html " id="t1">

</script>
<script>
     
    function dianji (){
        $('#yincang').hide()
        $("#jiao").show()
        
    }
    var time = new Date()
    var year = time.getFullYear()
    var month = time.getMonth() + 1
    var date = time.getDate()
    var day = time.getDay() //周几

    var dangqian = `${year}${'年'}${month}${'月'}${date}${'日'}${panduan(day)}`
    function panduan(jin) {
        switch (jin) {
            case 0:
                return '星期日'
                break;
            case 1:
                return '星期一'
                break;
            case 2:
                return '星期二'
                break;
            case 3:
                return '星期三'
                break;
            case 4:
                return '星期四'
                break;
            case 5:
                return '星期五'
                break;
            case 6:
                return '星期六'
                break;
        }

    }


    var shijian = {
        zuotian: `${year}${'年'}${month}${'月'}${date-1}${'日'}${panduan((day - 1) % 7)}`,
        jintian: dangqian,
        mingtian: `${year}${'年'}${month}${'月'}${date + 1}${'日'}${panduan((day + 1) % 7)}`,
        houtian: `${year}${'年'}${month}${'月'}${date + 2}${'日'}${panduan((day + 2) % 7)}`
    }
    console.log(shijian.mingtian)

    console.log(day)
    // shijian.call(xxx)
    var xxx = {
     fangfa: '<button class="jianting" qid=' + shijian.zuotian + ' type="checkbox"  cid="check1"><label   for="check1">' + '' + panduan((day - 1) % 7) + '</button>' +
        ' <button class="jianting " chcked qid= ' + shijian.jintian + '       type="checkbox"    id="check2"><label    for="check2" >' + '' + '今天' + '</button>' +
        ' <button class="jianting" qid=' + shijian.mingtian + ' type="checkbox"    id="check3"><label  for="check3">' + '' + panduan((day + 1) % 7) + '</button> ' +
        '<button class="jianting" qid= ' + shijian.houtian + ' type="checkbox"    id="check4"><label   for="check4">' + '' + panduan((day + 2) % 7) + '</button>'
    }


    $("#format").html(xxx.fangfa)
    // console.log($('label'))

    // 关联button


    $("#time").text(dangqian)

    $("#format,#jiao").buttonset();

    $("#sortable").sortable();
    $("#sortable").disableSelection();

    // console.log(localStorage.getItem('one'))

    var yonghuxinxi;
    if (localStorage.getItem('one')) {
        var e = localStorage.getItem('one')
        yonghuxinxi = JSON.parse(e)

    }
    else {
        yonghuxinxi = []
    }

    // du()
    $("#sbt").click(function () {
        tianjia()

    })

    function tianjia() {
        var x = $("#ipt").val()
        shuDui = {
            zhi: x,
            riqi: $("#time").text()

        }
        yonghuxinxi.push(shuDui)
        localStorage.setItem('one', JSON.stringify(yonghuxinxi));
        // du()

    }

  tt ()
function tt (){
            var riqi =[]

        yonghuxinxi.forEach(function (ww) {
                    var eee = {
                    x:ww.riqi,
                    y:ww.zhi,
                    
              }
              riqi.push(eee)
        })
        var nice='';
        riqi.forEach(function(w){
            // console.log(w)
               if(w.x==$('#time').text()){
                    nice += `<li >${w.y}</li>` 
            }
        })
         $("#sortable").html(nice)

        }

        // $(document.body).delegate(function (e) {
          
    // })
      
    $(document.body).delegate($('.jianting'), "click", function (e) {
        $("#time").text($(e.target).attr('qid'))
          tt ()
    })




    //  读取数据：

</script>


</html>